<template>
    <div>
      <div>
        <van-field v-model="account" label="账号" placeholder="请输入账号" style="background:rgba(0,0,0,0)"/>
        <van-field
          v-model="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          style="background:rgba(0,0,0,0)"
        />
        <van-field v-model="code" label="验证码" placeholder="请输入验证码" style="background:rgba(0,0,0,0)" />
        
        <br>
        
        <img :src="img_url" style="background:rgba(0,0,0,0)" alt="" />

        <br><br>

        <van-button type="default"  @click="login" style="background:rgba(0,0,0,0)">登录</van-button>
      </div>
    </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    return {
      account: "",
      password: "",
      code: "",

      img_url:'',
      uuid:uuidv4(),
    };
  },
  mounted() {
    this.image();
  },
  methods: {
    image: function () {
      this.img_url = "http://127.0.0.1:8000/user/image_code/" + this.uuid + '/';
      console.log("image", this.img_url);
    },
    login: function () {
      this.myaxios(this.host + "user/login/", "post", {
        account: this.account,
        password: this.password,
        code: this.code,
        uuid: this.uuid,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          localStorage.setItem("token", data.token);
          localStorage.setItem("id", data.data.id);
          this.$router.push('/menu/index')
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>

</style>